﻿@using System.Runtime.Remoting.Messaging
@using System.Web.UI.WebControls
@using CloudClass.Models
@model CloudClass.ViewModels.ClassIndexCatelog
@{
    Layout.Title = "课程";
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="carousel slide" style="background: #EEEEEE">
            <img alt="" src="@Href("~/Modules/CloudClass/Content/Home/images/3.png")" />
        </div>
    </div>
</div>

    <input type="hidden" id="hdCatelog" />
    <input type="submit" style="display: none" id="hdsubmit"/>
    <div class="container">
        <div class="row">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#class" data-toggle="tab">课程</a>
                    </li>
                    <li>
                        <a href="#class" data-toggle="tab">学习计划</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="class">

                        <div class="row">
                            <div class="span2" style="margin-left: 0px; padding-right: 50px">

                                <div class="category-content">
                                    <div class="all-class text-center "><span style="color: white" >全部课程</span></div>
                                    <div class="category">
                                        <ul class="category-list" id="js_climit_li">
                                            @foreach (CourseClassify coursefClassify in Model.CourseClassifies)
                                            {
                                                <li class="appliance js_toggle relative first">
                                                    <div class="category-info list-nz" style="font-size: 12pt;">
                                                        <a>@coursefClassify.ClassifyName</a>
                                                    </div>
                                                    <textarea class="menu-item-wrap none">
                                                        <div class="menu-item menu-in top">
                                                            <div class="area-in"><div class="area-bg">
                                                                <div class="menu-srot"><div class="sort-side">
                                                                    <dl class="dl-sort">
                                                                       
                                                                        @foreach (CourseClassify sub in Model.SubCourseClassifies.Where(p => p.ParentId == coursefClassify.Id).ToList())
                                                                        {
                                                                            <dd><a rel="@sub.Id" class="selectCatelog">@sub.ClassifyName</a></dd>
                                                                            
                                                                        }
                                                                    </dl></div></div></div></div></div>

                                                        </textarea>
                                                </li>
                                            }


                                        </ul>
                                    </div>
                                </div>


                            </div>
                            <div class="span10">
                                <div class="row-fluid">
                                    <div class="span8">
                                        <ul class="nav">
                                            <li>
                                                <h5 id="catelogName">全部课程</h5>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="span2">
                                        <ul class="nav">
                                            <li><span>价格：</span><select class="input-small" data-bind="options: price, 
　　　　　　　　　　　　　　optionsText: 'itemName', value: priceSelect">                 
                                               
                                                                  
                                                                </select></li></ul>
                                    </div>
                                    <div class="span2">
                                        <ul class="nav">
                                            <li>排序：<select class="input-small" data-bind="options: sort, 
　　　　　　　　　　　　　　optionsText: 'itemName', value: sortSelect">
                                           
                                                   </select>
                                            </li>
                                        </ul>
                                    </div>
                                    
                                </div>

                                <div class="row">
                                    <div data-bind="template:{name:'classinfo'}"></div>
                                    
                                    <script type="text/html" id="classinfo">
                                        <ul class="thumbnails" id="ulclass">
                                            {{?$data.table().length>0}}
                                            {{~$data.table():value:index}}
                                            <li style="margin-left: 13px; width: 185px">
                                               <input type="hidden" value="{{=value.Id}}"/>
                                            <div class="thumbnail">
                                                <img src="{{=value.CourseImage}}" alt="" style="margin-bottom: 10px">
                                                <p>{{=value.CourseName}}</p>
                                                <p><small>{{=value.UserInfo.UserName}}</small></p>
                                                <div class="row-fluid">
                                                    <div class="span3"><i class="icon-user"></i>288</div>
                                                    <div class="span6">
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                        <i class="icon-star"></i>
                                                    </div>
                                                    <div class="span3"><a class="btn  btn-mini">免费</a></div>
                                                </div>
                                            </div>
                                        </li>
                                        {{~}}
                                        {{?}}
                                             </ul>
                                    </script>
                                   

                                </div>
                                
                                <div data-bind="template:{name: 'tmpl-page'}"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>



<link href="~/Modules/CloudClass/Styles/index.css" rel="stylesheet" />
<script src="~/Modules/CloudClass/Scripts/leftnav.js"></script>
<script src="~/Modules/CloudClass/Scripts/classindex.js"></script>
<div id="tmpl-page-content">
    <script type="text/html" id="tmpl-page"> 
        <div class="pagination">
            <ul>      
            {{
            var currentIndex = $data.page.currentPage();
            var startIndex = Math.floor(($data.page.currentPage() - 1) / 10) * 10 + 1; 
            var endIndex = (startIndex + 10) < $data.page.pageCount() ? startIndex + 10 : $data.page.pageCount();
            if(endIndex==0){
            endIndex=1;
            }
            }}
            <li {{= (currentIndex==1 ? 'class="disabled"':'class="first"')}}><a href="javascript:void(0);"    data-bind="click: page.previousPage"><<</a></li>
            {{if (startIndex > 1) {}} 
            <li><a href="javascript:void(0);"  data-index="{{=startIndex - 1}}" data-bind="click: page.gotoPage">...</a></li>
            {{ } }}
            {{for (var i = startIndex; i <= endIndex; i++){ }}
            <li {{= (i==currentIndex ? 'class="active"':'')}}><a href="javascript:void(0);"  data-index="{{=i}}" data-bind="click: page.gotoPage">{{=(i)}}</a></li>
            {{ } }}
            {{if (startIndex + 10 < $data.page.pageCount()) {}} 
            <li><a href="javascript:void(0);"   data-bind="click: page.gotoPage" data-index="{{=endIndex}}">...</a></li>
            {{ } }}
            <li {{= (endIndex==currentIndex ? 'class="disabled"':'class="last"')}}><a href="javascript:void(0);"   data-bind="click: page.nextPage" >>></a></li>
                
                </ul>
        </div>
    </script>
</div>

